<template>
    <div>
        <mt-header class="plain">
            <mt-button icon="back" slot="left" @click="goBack">返回</mt-button>
            <!-- <mt-button slot="right" @click="goBack">取消</mt-button> -->
        </mt-header>

        <div class="option-list">
            <div class="option-item" @click="goAccountPage">
                <mt-cell title="账号与安全" class="spec" is-link></mt-cell>
            </div>
            <!-- <div class="option-item" @click="goMessagePage">
                <mt-cell title="新消息提醒" class="spec" is-link></mt-cell>
            </div> -->
            <div class="option-item" @click="goMessagePage">
                <mt-cell title="我的消息" class="spec" is-link></mt-cell>
            </div>
            <div class="option-item" @click="goFQAPage">
                <mt-cell title="常见问题" class="spec" is-link></mt-cell>
            </div>
            <div class="option-item" @click="goSuggestionPage">
                <mt-cell title="投诉与建议" class="spec" is-link></mt-cell>
            </div>
            <div class="option-item" @click="goAboutPage">
                <mt-cell title="关于平台" class="spec" is-link></mt-cell>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    data() {
        return {
        }
    },

    methods: {
        goAccountPage() {
            this.$router.push('/personal/setting/account');
        },

        goMessagePage() {
            this.$router.push('/personal/setting/message');
        },

        goFQAPage() {
            this.$router.push('/personal/setting/fqa');
        },

        goSuggestionPage() {
            this.$router.push('/personal/setting/suggesion');
        },

        goAboutPage() {
            this.$router.push('/personal/setting/about');
        },

        goBack() {
            this.$router.replace('/personal');
        }
    }
}
</script>

<style lang="scss" scoped>
$offset-x: 16px;
$scale: 1.2;
.option-list {
    margin-left: $offset-x;
    margin-right: $offset-x;
    padding-top: 8px;
    border-top: 1px solid #dddddd;
    
    .option-item {
        height: 48px;
        border-bottom: 1px solid #dddddd;
        font-size: 14px * $scale;
        text-align: left;
        color: #333333;
    }
}
</style>
